<style>
.greenFirstLetter:first-letter { color: green; }
.absolute { position: absolute; left: 100px; }
.float { float: left; }
</style>
<p>
    All the X&rsquo;s below should be green. All other letters should be black.
</p>
<div class="greenFirstLetter">
    XY
</div>
<div class="greenFirstLetter">
    <img>YZ
</div>
<div class="greenFirstLetter">
    <img align="left">XY
</div>
<div class="greenFirstLetter">
    <div class="absolute">VW</div>XY
</div>
<div class="greenFirstLetter">
    <div>
        <div class="absolute">VW</div>XY
    </div>
</div>
<div class="greenFirstLetter">
    <div>
        <img>
        <div class="absolute">VW</div>YZ
    </div>
</div>
<div class="greenFirstLetter">
    <div class="float">VW</div>XY
</div>
<div class="greenFirstLetter">
    <div>
        <div class="float">VW</div>XY
    </div>
</div>
<div class="greenFirstLetter">
    <div>
        <img>
        <div class="float">VW</div>YZ
    </div>
</div>
